<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('配置商品图片')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-agentInfo-setLeader">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">服务商编号：</label>
                <div class="col-sm-8">
                    <input type="text" name="agentNum" th:value="${agentInfo.agentNum}" class="form-control" readonly/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">服务商名称：</label>
                <div class="col-sm-8">
                    <input type="text" name="agentName" th:value="${agentInfo.agentName}" class="form-control" readonly/>
                </div>
            </div>
<!--
            <div class="form-group" style="display:none;">
                <label class="col-sm-3 control-label is-required">奖励档位：</label>
                <div class="col-sm-8">
                    <input type="hidden" id="special_grade_id" name="specialGradeId" value="" class="form-control" readonly/>
                    <input name="salesName" onclick="selectSpecialBounty()" readonly id="sumMoney" type="text" placeholder="奖励档位" class="form-control">
                    <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
                </div>
            </div>
-->
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <button type="button"  onclick="addBanner()" class="btn btn-w-m btn-primary">新增凭证图框</button>
                    <button type="button" id="deleteBanner" onclick="delBanner()" style="display: none" class="btn btn-w-m btn-danger">删除凭证图框</button>
                </div>
            </div>
            <div class="form-group goodsBannerTable" id="goodsBannerTable" style="position:relative">
                <label class="col-sm-3 control-label">凭证图片：</label>
                <br/>
                <div class="fileinput fileinput-new " data-provides="fileinput" style="margin-left: 15px">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                            <input type="file" name="banner" accept ="image/*"></span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
                <div id="banner" style="display: none;">
                    <div class="form-group">
                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                            <div>
                                <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                                    <input type="file" name="banner" accept ="image/*"></span>
                                <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jasny-bootstrap-js" />
    <script th:inline="javascript">
        var prefix = ctx + "agentInfo/agentInfo";

        $("#form-agentInfo-setLeader").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
              // $.operate.save(prefix + "/saveImg", $('#form-goodsinfo-setimg').serialize())


                var banner=$("[name='banner']");
                var formData = new FormData();


                for(var j=0;j<banner.length;j++){
                    var bannerFile=banner.get(j).files[0];
                    if (bannerFile!='undefined' && bannerFile != undefined){
                        formData.append("bannerFile",bannerFile);
                    }
                }

                var agentNum=$("[name='agentNum']").val();
                formData.append("agentNum",agentNum);
                var specialGradeId=$("[name='specialGradeId']").val();
                formData.append("specialGradeId",specialGradeId);

                $.ajax({
                    url : prefix + "/setLeader",
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success : function(result) {
                        if (result.code == web_status.SUCCESS) {
                            var parent = window.parent;
                            if (parent.table.options.type == table_type.bootstrapTable) {
                                $.modal.close();
                                parent.$.modal.msgSuccess(result.msg);
                                parent.$.table.refresh();
                            } else if (parent.table.options.type == table_type.bootstrapTreeTable) {
                                $.modal.close();
                                parent.$.modal.msgSuccess(result.msg);
                                parent.$.treeTable.refresh();
                            } else {
                                $.modal.msgReload("保存成功,正在刷新数据请稍后……", modal_status.SUCCESS);
                            }
                        } else if (result.code == web_status.WARNING) {
                            $.modal.alertWarning(result.msg)
                        }  else {
                            $.modal.alertError(result.msg);
                        }
                        $.modal.closeLoading();
                        $.modal.enable();
                        //$.modal.alertSuccess(data.msg)
                    },
                    error : function(result) {
                        $.modal.alertError(result.msg);
                    }
                });
            }
        }



        var j=1;
        function addBanner(){
            var mydiv = "<div class='banner' id='banner"+j+"' style='display:inline-block'></div>";

             var html='<div class="form-group goodsBannerTable">\n' +
                 '                <label class="col-sm-3 control-label">凭证图片：</label>\n' +
                 '                <br/>\n' +
                 '                <div class="fileinput fileinput-new" data-provides="fileinput" style="margin-left: 20px">\n' +
                 '                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>\n' +
                 '                    <div>\n' +
                 '                        <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>\n' +
                 '                            <input type="file" name="banner" accept ="image/*"></span>\n' +
                 '                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>\n' +
                 '                    </div>\n' +
                 '                </div>\n' +
                 '</div>';
            if (j%4==0){
                $("#goodsBannerTable").append(html);
            }else{
                $(".goodsBannerTable:last").append(mydiv);
                $("#banner"+j).html($("#banner").html());
            }
            j++;
            toggleBannerButton();

        }
        function delBanner(){
            if(j>=0){
                if ((j-1)%4==0){
                    $(".goodsBannerTable:last").remove();
                }else{
                    $(".banner").eq(-1).remove();
                }
            }
            j--;
            toggleBannerButton();
        }

        function toggleBannerButton() {
            if (j > 1) {
                $("#deleteBanner").show();
            } else {
                $("#deleteBanner").hide();
            }
        }

        function selectSpecialBounty() {
            var url = prefix + "/selectSpecialBounty";
            $.modal.open("选择档位奖励" , url, '1000');
        }
    </script>
</body>
</html>